<template>
  <div class="content home">
    <div style="text-align: center;margin: 50px 0 30px 0;">
      <TbSvg style="width: 100px;height: 100px;" slot="addonBefore"></TbSvg>
    </div>
    <div style="width: 2.64rem;margin: auto;">
      <a-input-search size="large" placeholder="淘宝商品优惠券" style="width: 100%" v-model="search" @search="onSearch" >
        <TbSvg style="width: 40px;height: 40px;" slot="addonBefore"></TbSvg>
      </a-input-search>
    </div>
    <div style="margin: 50px 6px 0 6px;text-align: center;width: 100%;">
        <div class="easy-card" @click="global.toPage('/activity/elm')" style="margin:0.05rem;background-color: #FFFFFF;width:1.15rem;height: 0.32rem;border-radius: 4px;display: inline-block;padding: 10px;">
          <a-row style="height: 100%;position: relative;">
            <a-col :span="6" style="height: 100%;position: relative;"><ElmSvg style="width: 0.24rem;height: 0.24rem;position: relative;top: 50%;transform: translateY(-50%);"></ElmSvg></a-col>
            <a-col class="web-font-regular" :span="18" style="position: relative;top: 50%;transform: translateY(-50%);">
              饿了么外卖红包
            </a-col>
          </a-row>
        </div>

        <div class="easy-card" @click="global.toPage('/activity/mtwm')" style="margin:0.05rem;background-color: #FFFFFF;width:1.15rem;height: 0.32rem;border-radius: 4px;display: inline-block;padding: 10px;">
          <a-row style="height: 100%;position: relative;">
            <a-col :span="6" style="height: 100%;position: relative;"><MtwmSvg style="width: 0.24rem;height: 0.24rem;position: relative;top: 50%;transform: translateY(-50%);"></MtwmSvg></a-col>
            <a-col class="web-font-regular" :span="18" style="position: relative;top: 50%;transform: translateY(-50%);">
              美团外卖红包
            </a-col>
          </a-row>
        </div>

        <div class="easy-card" @click="global.toPage('/activity/bdwp')" style="margin:0.05rem;background-color: #FFFFFF;width:1.15rem;height: 0.32rem;border-radius: 4px;display: inline-block;padding: 10px;">
          <a-row style="height: 100%;position: relative;">
            <a-col :span="6" style="height: 100%;position: relative;"><BdwpSvg style="width: 0.24rem;height: 0.24rem;position: relative;top: 50%;transform: translateY(-50%);"></BdwpSvg></a-col>
            <a-col class="web-font-regular" :span="18" style="position: relative;top: 50%;transform: translateY(-50%);">
              百度网盘会员
            </a-col>
          </a-row>
        </div>

        <div class="easy-card" @click="global.toPage('/activity/taobao')" style="margin:0.05rem;background-color: #FFFFFF;width:1.15rem;height: 0.32rem;border-radius: 4px;display: inline-block;padding: 10px;">
          <a-row style="height: 100%;position: relative;">
            <a-col :span="6" style="height: 100%;position: relative;"><TbSvg style="width: 0.24rem;height: 0.24rem;position: relative;top: 50%;transform: translateY(-50%);"></TbSvg></a-col>
            <a-col class="web-font-regular" :span="18" style="position: relative;top: 50%;transform: translateY(-50%);">
              淘宝活动优惠券
            </a-col>
          </a-row>
        </div>

        <div class="easy-card" @click="global.toPage('/activity/pdd')" style="margin:0.05rem;background-color: #FFFFFF;width:1.15rem;height: 0.32rem;border-radius: 4px;display: inline-block;padding: 10px;">
          <a-row style="height: 100%;position: relative;">
            <a-col :span="6" style="height: 100%;position: relative;"><PddSvg style="width: 0.24rem;height: 0.24rem;position: relative;top: 50%;transform: translateY(-50%);"></PddSvg></a-col>
            <a-col class="web-font-regular" :span="18" style="position: relative;top: 50%;transform: translateY(-50%);">
              拼多多优惠券
            </a-col>
          </a-row>
        </div>
    </div>

    <div class="foot">
      <span>网站备案号：
        <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备19154149号-1</a>
      </span><br>
      <span>Copyright © 2019 TDchen 版权所有</span><br>
    </div>
  </div>
</template>

<script>
  import TbSvg from '@/public/svg/tb.svg'
  import ElmSvg from '@/public/svg/elm.svg'
  import MtwmSvg from '@/public/svg/mtwm.svg'
  import BdwpSvg from '@/public/svg/bdwp.svg'
  import PddSvg from '@/public/svg/pdd.svg'

  export default {
    components: {
      TbSvg,
      ElmSvg,
      MtwmSvg,
      BdwpSvg,
      PddSvg
    },
    data() {
      return {
        search: '',
      }
    },
    methods: {
      onSearch() {
        this.$router.push({
              path: `/search/taobao`,
              query: {
                  search: this.search
              }
           })
      },

    }
  };
</script>

<style>
  .content {
    width: 100%;
  }
  .ant-input-lg {
      height: 50px;
      padding: 6px 11px;
      font-size: 16px;
  }
  .easy-card:hover {
    cursor: pointer;
    transform: translateY(-2px);
    transition: all ease 0.2s;
    box-shadow: 1px 0 6px #dcdde1;
  }
  .home .foot {
    text-align: center;
    margin-top: 150px;
  }
</style>
